<template>
    <Head>
        <Title>一个神奇的博客</Title>
    </Head>
    <div class="index-navs">
        <NuxtLink to="/">综合动态</NuxtLink>
    </div>
    <AppLoading :pending="pending" :total="total === 0">
        <!-- 文章卡片 -->
        <Articles :data="list" />
        <!-- 分页 -->
        <div v-if="total > pageSize" class="app-pages">
            <Page :total="total" :page-size="pageSize" :page-num="pageNum" />
        </div>
    </AppLoading>
</template>
<script setup lang="ts">
/**
 * 文章列表
 */
const { list, pending, total, pageNum, pageSize } = await articlesApi(states().pageNum)
</script>